<meta title="分佣订单" />
<div class="p">
    <div class="m-b clearfix">
        <form class="form-inline" id="form">
            <input autocomplete="off" type="text" class="form-control input-sm" name="commissionItemId" placeholder="佣金商品ID" />
            <input autocomplete="off" type="text" class="form-control input-sm" name="userId" placeholder="用户ID" />
            <input autocomplete="off" type="text" class="form-control input-sm" placeholder="商品名" style="width:200px;" name="itemTitle" />
            <input autocomplete="off" type="text" class="form-control input-sm" placeholder="电商平台商品ID" style="width:200px;" name="itemId" />
            <input autocomplete="off" type="text" class="form-control input-sm" placeholder="电商平台订单号" style="width:200px;" name="orderNo" />
            <input autocomplete="off" type="text" class="form-control input-sm" placeholder="创建开始时间" style="width:120px;"
                   s="datetimepicker" name="minCreateTime" /> -
            <input autocomplete="off" type="text" class="form-control input-sm" placeholder="创建结束时间"  s="datetimepicker"
                   style="width:120px;" name="maxCreateTime" />
            <input type="hidden" name="page" id="page" value="1" />
            <div class="p-t-xs">
                <input autocomplete="off" type="text" class="form-control input-sm" placeholder="结算开始时间" style="width:120px;"
                       s="datetimepicker" name="minSettledTime" /> -
                <input autocomplete="off" type="text" class="form-control input-sm" placeholder="结算结束时间"  s="datetimepicker"  style="width:120px;" name="maxSettledTime" />
                <select class="form-control input-sm" s="select" s-build="S.get('/api/enum/valuesMap/core.enums.EcomPlat')"
                        name="ecomPlat">
                    <option value="">电商平台</option>
                </select>
                <select class="form-control input-sm" s="select" s-build="S.get('/api/enum/valuesMap/core.enums.CommissionOrderStatus')"
                        name="status">
                    <option value="">状态</option>
                </select>
                <button type="button" class="btn btn-default btn-sm" s-click="$page.node.val(1); $userCommissionOrdersGrid.refresh()">查询</button>
                <input type="button" class="btn btn-default btn-sm pull-right" s-click="exportXsl()" value="导出"/>
            </div>
        </form>
    </div>
    <div id="userCommissionOrdersGrid"
         s='datac,nda'
         s-data="S.get('/api/user-commission-order/search', $form.node.serialize())">
        <table class="table table-striped table-bordered table-hover table-middle user-commission-order-list">
            <tr>
                <th>商品</th>
                <th>用户</th>
                <th>平台</th>
                <th>佣金订单</th>
                <th>分佣信息</th>
                <th>佣金信息</th>
                <th>分佣类型</th>
                <th>创建时间</th>
                <th>结算时间</th>
                <th>状态</th>
            </tr>
            <tbody s="loop" s-data-filter="'results'">
            <tr s-loop-role="empty">
                <td colspan="10">暂无数据</td>
            </tr>
            <tr s-loop-role="row" s-check-role="i" s="datac" class="userCommissionOrder">
                <td s="tpl" class="row">
                    <div style="width: 200px;">
                        <img src="{%=this.itemPicUrl%}" style="max-width: 50px; max-height: 50px;" class="pull-left" />
                        <div class="pull-right" style="width: 140px;">
                            <div>ID:{%=this.commissionItemId%}</div>
                            <div style="text-overflow: ellipsis; overflow: hidden; height: 40px;">{%=this.itemTitle%}</div>
                        </div>
                    </div>
                </td>
                <td s="tpl">
                    <div style="width: 200px;">
                        <img src="{%=this.userAvatarUrl%}" style="max-width: 50px; max-height: 50px;" class="pull-left" />
                        <div class="pull-right" style="width: 140px;">
                            <div>ID: {%=this.userId%}</div>
                            <div>{%=this.userNickname%}</div>
                            <div class="text-warning">{%=this.userPhone%}</div>
                        </div>
                    </div>
                </td>
                <td name="ecomPlatTitle"></td>
                <td>
                    <dl class="dl-horizontal">
                        <dt>订单金额：</dt>
                        <dd name="payFee.toFixed(2)"></dd>
                        <dt>预估佣金：</dt>
                        <dd>
                            ¥<span name="commissionOrderEstimateCommissionFee.toFixed(2)"></span>
                            <label class="label label-warning"><span name="commissionOrderEstimateCommissionRate.toFixed(2)"></span>%</label>
                        </dd>
                        <dt>订单佣金：</dt>
                        <dd>
                            ¥<span name="commissionOrderCommissionFee.toFixed(2)"></span>
                            <label class="label label-warning"><span name="commissionOrderCommissionRate.toFixed(2)"></span>%</label>
                        </dd>
                    </dl>
                </td>
                <td>
                    <dl class="dl-horizontal">
                        <dt>分配比例：</dt>
                        <dd><span name="allotCommissionRate.toFixed(2)"></span>%</dd>
                        <dt>总佣金率：</dt>
                        <dd>
                            <span name="commissionRate.toFixed(2)"></span>%
                        </dd>
                        <dt>预估佣金：</dt>
                        <dd>
                            ¥<span name="estimateCommissionFee.toFixed(2)"></span>
                        </dd>
                        <dt>预估奖励：</dt>
                        <dd>
                            ¥<span name="estimateRewardFee.toFixed(2)"></span>
                        </dd>
                    </dl>
                </td>
                <td s="tpl">
                    <dl class="dl-horizontal">
                        <dt>佣金：</dt>
                        <dd><span name=""></span>{%=(this.commissionOrderCommissionFee || 0).toFixed(2)%}</dd>
                        <dt>结算总额：</dt>
                        <dd>
                            <div>
                                {%if(this.settledFee) {%}
                                <span >{%=this.settledFee.toFixed(2)%}</span>
                                {%} else {%}
                                待结算
                                {%}%}
                            </div>
                        </dd>
                        <dt>结算佣金：</dt>
                        <dd>
                            <div>
                                {%if(this.settledCommissionFee) {%}
                                <span >{%=this.settledCommissionFee.toFixed(2)%}</span>
                                {%} else {%}
                                待结算
                                {%}%}
                            </div>
                        </dd>
                        <dt>结算奖励：</dt>
                        <dd>
                            <div>
                                {%if(this.settledRewardFee) {%}
                                <span >{%=this.settledRewardFee.toFixed(2)%}</span>
                                {%} else {%}
                                待结算
                                {%}%}
                            </div>
                        </dd>
                    </dl>
                </td>
                <td name="allotTypeTitle"></td>
                <td name="createTime"></td>
                <td name="settledTime"></td>
                <td s="tpl">
                    <label class="label
                            {%
                                switch(this.status) {
                                    case 'WAIT_PAY': out.print('label-default'); break;
                                    case 'PAID': out.print('label-info'); break;
                                    case 'WAIT_SETTLE': out.print('label-warning'); break;
                                    case 'SETTLED': out.print('label-success'); break;
                                    case 'INVALID': out.print('label-default'); break;
                                }
                            %}
                            ">{%=this.statusTitle%}</label>
                </td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
                <td colspan="10" class="text-right">
                    共有<span name="total"></span>个数据
                    <ul s="pagination"
                        s-pagination="{action:function(){$page.node.val(this); $userCommissionOrdersGrid.refresh()}}"
                        class="pagination pagination-sm">
                    </ul>
                </td>
            </tr>
            </tfoot>
        </table>
    </div>
</div>
<style>
    .user-commission-order-list dt{
        width: 70px;
    }
    .user-commission-order-list dd {
        margin-left: 70px;
    }
</style>
<script type="text/javascript">

    S.meta.btns = [
        {
            name: '关闭',
            style: 'btn btn-default',
            click: function() {
                S.close(true)
            }
        }
    ]

		function exportXsl() {
			S.popupOpen('/export-num.html').done(function (maxCount) {
				if (maxCount) {
					window.open('/api/user-commission-order/export?' + $form.node.serialize() + '&maxCount=' + maxCount)
				}
			})
		}

</script>